<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/login.css">
<script src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/bootstrapValidator.js"></script>
<link href="styles/bootstrapValidator.css" rel="stylesheet" />
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-4 col-md-offset-4">
				<div class="account-wall">
					<h1 class="text-center login-title" style="font-size: 24px">宜居后台登录</h1>
					<img class="profile-img" src="images/login.jpg" alt="">
					<form class="form-signin" id="loginForm" action="login.action" method="post">
						<div class="form-group">
							<input name="username" type="text" class="form-control" placeholder="输入用户名">
						</div>
						<div class="form-group">
							<input name="password" type="password" class="form-control" placeholder="输入密码">
						</div>
						<div class="form-group">
							<input name="kaptcha" class="form-control" type="text" placeholder="输入验证码">
						</div>
						<img src="kaptcha.jpg" id="captchaImage" title="看不清,点击换一张" style="margin-bottom: 10px; float: right" />
						<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
						<label class="checkbox pull-left"> <input type="checkbox" value="remember-me"> Remember me
						</label> <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		var error = "${error}";
		if(error.length>0){
			if(error=="用户名/密码错误")
				$("input[name='password']").parent().append('<smally style="color:#a94442" class="help-block" data-bv-result="INVALID" data-bv-validator="notEmpty" data-bv-validator-for="password" >'+error+'</small>');
			else
				$("input[name='kaptcha']").parent().append('<smally style="color:#a94442" class="help-block" data-bv-result="INVALID" data-bv-validator="notEmpty" data-bv-validator-for="kaptcha" >'+error+'</small>');
			error = "";
		}
			
	}); 
	
    $(function () {
    	$('#loginForm').bootstrapValidator({
			message: 'This value is not valid',
            feedbackIcons: {
            	valid: 'glyphicon glyphicon-ok',
            	invalid: 'glyphicon glyphicon-remove',
            	validating: 'glyphicon glyphicon-refresh'
            	},
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                kaptcha: {
                    message: '验证码验证失败',
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });
    });
		$('#captchaImage').click(
				function() {
					$(this).attr('src',
							'kaptcha.jpg?' + Math.floor(Math.random() * 100));
				});
	</script>
</body>
</html>